<template>
	<view class="content">

		<view v-if="id == 227"
			:style="{ width: chunwan.width, height: chunwan.height, background: get_back(), backgroundSize: '100% 100%' }">
			<view class="top_img">
				<image :src="topImg[4].imgTop"></image>
			</view>
		</view>

		<view v-else>
			<view v-for="(item, idx) in topImg">
				<view class="top_img" v-if="id == item.id">
					<image :src="item.imgTop"></image>
				</view>
			</view>
		</view>

		<view class="" v-if="list.length > 0">
			<view class="middle" v-if="id != 227">
				<view class="middle_for" v-for="(item, idx) in list"
					@click="to_details(item.init_id, item.title, item.content, item.video_url)">
					<view class="middle_imgs">
						<image :src="item.imgs" mode=""></image>
					</view>
					<view class="middle_text" v-if="item.title">作品: {{item.title}}</view>
					<view class="middle_text" v-if="item.author">作者: {{item.author}}</view>
					<view class="middle_text" v-if="item.lessee_name">单位: {{item.lessee_name}}</view>
				</view>
			</view>

			<view class="springFestivalGala" v-else>
				<view class="SFG_for" v-for="(item, idx) in list"
					@click="to_details(item.init_id, item.title, item.content, item.video_url)">
					<view class="SFG_diss">
						<view class="SFG_imgs">
							<image :src="item.imgs" mode=""></image>
						</view>
						<view class="SFG_text">
							<view class="SFG_title">{{item.title}}</view>
							<view>表演单位: {{item.lessee_name}}</view>
							<view>编导: {{item.author}}</view>
							<view style="display: flex;" v-if="item.description">
								<view style="width: 14%;">演员: </view>
								<view style="width: 82%;">{{item.description}}</view>
							</view>
						</view>
					</view>
					<view class="SFG_di">
						<image src="/static/activity/newYear/di.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view style="color: white; text-align: center; margin-top: 50rpx;" v-if="list.length <= 0 && yes == 1">
			暂无数据
		</view>

		<!-- 弹窗 -->
		<view class="fwb" v-if="is_show == true">
			<view class="cha" @click="close">
				<image src="@/static/home/cha.png" mode=""></image>
			</view>
			<u-parse :content="richText" :imageProp='imageProp' />
		</view>

		<!-- 遮盖层 -->
		<view class="zhegai" v-if="is_show == true"></view>

	</view>
</template>

<script>
	import config from "@/config";
	import uParse from '@/components/u-parse/u-parse.vue'
	export default {
		components: {
			uParse
		},
		data() {
			return {
				id: null,
				note: null,
				list: [],
				topImg: [{
						id: 223,
						imgTop: config.ossUrl + "/new_app/activity/newYear/NY2025/shufaTop.png"
					},
					{
						id: 224,
						imgTop: config.ossUrl + "/new_app/activity/newYear/NY2025/meishuTop.png"
					},
					{
						id: 225,
						imgTop: config.ossUrl + "/new_app/activity/newYear/NY2025/sheyingTop.png"
					},
					{
						id: 226,
						imgTop: config.ossUrl + "/new_app/activity/newYear/NY2025/niancaiTop.png"
					},
					{
						id: 227,
						imgTop: config.ossUrl + "/new_app/activity/newYear/NY2025/chunwanTop.png"
					},
				],
				chunwan: {
					width: '100vw',
					height: '575rpx',
				},
				richText: '',
				imageProp: {
					mode: 'widthFix',
					padding: 0,
					lazyLoad: false,
					window: '100%'
				},
				is_show: false,
				yes: 0,
			}
		},
		onLoad(opt) {
			uni.showLoading({
				title: '加载中...'
			});
			this.id = opt.id
			this.note = opt.note
			this.get_list();
		},
		methods: {
			get_back() {
				return 'url(' + config.ossUrl + '/new_app/activity/newYear/NY2025/chunwanBj.png)';
			},
			get_list() {
				let self = this
				self.$boya.Request({
					url: '/activity/article',
					data: {
						type: 25,
					}
				}, function(res) {
					// console.log('listRes: ', res.data);
					uni.hideLoading();
					let data = res.data.data
					for (var i = 0; i < data.length; i++) {
						if (data[i].id == self.id) {
							let init_index = data[i].init_index
							for (var j = 0; j < init_index.length; j++) {
								if (init_index[j].imgs) {
									let img = init_index[j].imgs.substring(2, init_index[j].imgs.length - 2);
									init_index[j].imgs = img
								}
								// self.list.push(init_index[j]);
								// self.list.push(init_index[j]);
								// self.list.push(init_index[j]);
							}
							self.list = init_index
							self.yes = 1
						}

					}
					console.log('list: ', self.list);
				}, false)
			},
			to_details(init_id, title, content, videoUrl) {
				let self = this
				if (self.note == '富文本') {
					self.richText = content
					self.is_show = true
				} else if (self.note == '视频') {
					uni.navigateTo({
						url: '/pages/activities/newYear/NY2025/video_details?id=' + init_id + '&title=' + title + '&videoUrl=' + videoUrl
					})
				}
			},
			close: function() {
				this.is_show = false
			},
		},
	}
</script>

<style>
	@import url("@/components/u-parse/u-parse.css");

	.content {
		width: 100vw;
		min-height: 100vh;
		background: linear-gradient(to bottom, #B70916, #B70916, #FB4651);
	}

	.top_img {
		width: 100vw;
		height: 400rpx;
	}

	.top_img>image {
		width: 100%;
		height: 100%;
	}

	.middle {
		width: 90%;
		max-height: 1050rpx;
		overflow: auto;
		margin: 0 auto;
		margin-top: 50rpx;
		color: white;
		font-size: 22rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.middle_for {
		width: 320rpx;
		margin-bottom: 30rpx;
	}

	.middle_imgs {
		width: 320rpx;
		height: 220rpx;
		margin-bottom: 10rpx;
	}

	.middle_imgs>image {
		width: 100%;
		height: 100%;
		/* background-color: #FCE4C4; */
		border-radius: 6rpx;
	}

	.middle_text {
		margin: 5rpx 10rpx;
	}

	.middle_diss {
		display: flex;
	}

	.springFestivalGala {
		max-height: 1050rpx;
		overflow: auto;
		position: relative;
		z-index: 99;
		margin-top: -130rpx;
		margin-left: 40rpx;
	}

	.SFG_for {
		margin-bottom: 50rpx;
	}

	.SFG_diss {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.SFG_imgs {
		width: 300rpx;
		height: 200rpx;
	}

	.SFG_imgs>image {
		width: 100%;
		height: 100%;
		/* background-color: black; */
		border-radius: 2rpx;
	}

	.SFG_text {
		width: 400rpx;
		color: #FDD28E;
		font-size: 22rpx;
	}

	.SFG_title {
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
	}

	.SFG_di {
		width: 100%;
		height: 8rpx;
		margin-top: -22rpx;
	}

	.SFG_di>image {
		width: 100%;
		height: 100%;
	}

	.fwb {
		position: absolute;
		z-index: 98;
		top: 18%;
		width: 100vw;
		height: 30%;
	}

	.cha {
		position: absolute;
		z-index: 99;
		top: -100rpx;
		right: 30rpx;
		width: 70rpx;
		height: 70rpx;
	}

	.cha>image {
		width: 100%;
		height: 100%;
	}

	.rich_text {
		margin-top: 150rpx;
		width: 100%;
		height: 100%;
	}

	.zhegai {
		position: absolute;
		z-index: 95;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
	}
</style>